<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <div th:replace="common/common :: headblock('GLUE任务管理')"></div>
  <!--  引入自定义CSS -->
  <link rel="stylesheet" href="/jslib/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" >
  
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <div th:replace="common/common :: main-header"></div>
  
  <!-- Left side column. contains the logo and sidebar -->
  <div th:replace="common/common :: main-sidebar"></div>
  
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
  
    <!-- Content Header (Page header) -->
	<section class="content-header">
       <h1>GLUE任务管理</h1>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
	  <div class="row">
                <div class="col-xs-3">
                    <div class="input-group">
                        <span class="input-group-addon">任务状态</span>
                        <select class="form-control" id="jobStatus">
                            <option value="" >全部</option>
                            <option value="NORMAL" >运行中</option>
                            <option value="PAUSED" >暂停</option>
                        </select>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="input-group">
                        <span class="input-group-addon">任务描述</span>
                        <input type="text" class="form-control" id="jobDesc" autocomplete="on" >
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="input-group">
                        <span class="input-group-addon">任务名称</span>
                        <input type="text" class="form-control" id="jobName" autocomplete="on" >
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 8px">
                <div class="col-xs-2">
                    <button class="btn btn-block btn-info" id="searchBtn">搜索</button>
                </div>
                <div class="col-xs-2">
                    <button class="btn btn-block btn-success" id="addjobBtn">新增任务</button>
                </div>
                <div class="col-xs-2">
                    <button class="btn btn-block btn-danger" id="importBtn">导入任务</button>
                </div>
                <div class="col-xs-2">
                    <button class="btn btn-block btn-info" id="exportBtn">导出任务</button>
                </div>
            </div>
            
            <div class="row" style="margin-top: 8px">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header hide">
                            <h3 class="box-title">调度任务列表</h3>
                        </div>
                        <div class="box-body" >
                            <table id="job_list" class="table table-bordered table-striped" width="100%" >
                                <thead>
                                    <tr>
                                        <th name="id" >ID</th>
                                        <th name="name" >任务名称</th>
                                        <th name="descript" >任务描述</th>
                                        <th name="type" >类型</th>
                                        <th name="crontab" >Cron</th>
                                        <th name="status" >状态</th>
                                        <th name="owner" >负责人</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot></tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

<!-- 新增.模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >新增Glue任务</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form" role="form" id="addform">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">任务名称<font color="red">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="name" placeholder="任务名称" maxlength="50" ></div>
                        <label for="lastname" class="col-sm-2 control-label">任务描述<font color="red">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="descript" placeholder="任务描述" maxlength="50" ></div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">Glue类型<font color="red">*</font></label>
                        <div class="col-sm-4">
                            <select class="form-control" name="type" >
                                <option value="bash" >Bash</option>
                                <option value="python" >Python</option>
                                <option value="nodejs" >Nodejs</option>
                            </select>
                        </div>
                        <label for="lastname" class="col-sm-2 control-label">Cron表达式<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="crontab" placeholder="Cron表达式" maxlength="128" ></div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">任务状态<font color="red">*</font></label>
                        <div class="col-sm-4">
                            <select class="form-control" name="status" >
                                <option value="PAUSED" selected="selected">暂停</option>
                                <option value="NORMAL" >正常</option>
                            </select>
                        </div>
                        <label for="lastname" class="col-sm-2 control-label">负责人<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="owner" placeholder="负责人" maxlength="50" ></div>
                    </div>
                    <!-- 
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">343434<font color="black">*</font></label>
                        <div class="col-sm-10">
                            <textarea class="textarea form-control" name="executorParam" placeholder="3434343" maxlength="512" style="height: 63px; line-height: 1.2;"></textarea>
                        </div>
                    </div>
                     -->
                    <hr>
                    <div class="form-group">
                        <div class="col-sm-offset-5 col-sm-3">
                            <button type="button" class="btn btn-primary" id="addSubmitBtn">添加</button>
                            <button type="button" class="btn btn-default" id="addCanalBtn" data-dismiss="modal">取消</button>
                            <!-- <input type="hidden" name="id" >  -->
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>


<!-- 更新.模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >修改Glue任务</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form" role="form" id="updateform">
                    <div class="form-group">
                        <input type="text" style="display:none;" id="updateid" name="id" />
                        <label for="firstname" class="col-sm-2 control-label">任务名称<font color="red">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" id="updatename" name="name" placeholder="任务名称" maxlength="50" ></div>
                        <label for="lastname" class="col-sm-2 control-label">任务描述<font color="red">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" id="updatedescript" name="descript" placeholder="任务描述" maxlength="50" ></div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">Glue类型<font color="red">*</font></label>
                        <div class="col-sm-4">
                            <select class="form-control" id="updatetype" name="type" >
                                <option value="bash" >Bash</option>
                                <option value="python" >Python</option>
                                <option value="nodejs" >Nodejs</option>
                            </select>
                        </div>
                        <label for="lastname" class="col-sm-2 control-label">Cron表达式<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" id="updatecrontab" name="crontab" placeholder="Cron表达式" maxlength="128" ></div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">任务状态<font color="red">*</font></label>
                        <div class="col-sm-4">
                            <select class="form-control" id="updatestatus" name="status" >
                                <option value="PAUSED" selected="selected">暂停</option>
                                <option value="NORMAL" >正常</option>
                            </select>
                        </div>
                        <label for="lastname" class="col-sm-2 control-label">负责人<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" id="updateowner" name="owner" placeholder="负责人" maxlength="50" ></div>
                    </div>
                    <!--
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">343434<font color="black">*</font></label>
                        <div class="col-sm-10">
                            <textarea class="textarea form-control" name="executorParam" placeholder="3434343" maxlength="512" style="height: 63px; line-height: 1.2;"></textarea>
                        </div>
                    </div>
                     -->
                    <hr>
                    <div class="form-group">
                        <div class="col-sm-offset-5 col-sm-3">
                            <button type="button" class="btn btn-primary" id="updateSubmitBtn">添加</button>
                            <button type="button" class="btn btn-default" id="updateCanalBtn" data-dismiss="modal">取消</button>
                            <!-- <input type="hidden" name="id" >  -->
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>


  <!-- Main Footer -->
  <div th:replace="common/common :: main-footer"></div>

  <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- 引入通用javaScript -->
<div th:replace="common/common :: commonfooterjs"></div>
<!--  引入自定义javaScript -->
<script type="text/javascript" src="/jslib/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/jslib/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!--  引入自定义javaScript -->
<script type="text/javascript" src="/js/gluejob/index.js"></script>

<script type="text/javascript">

</script>
</body>
</html>